<template>
  <div class="document-container">
    <div
      class="drag-container"
      @dragover.prevent
      @dragenter.prevent
      @drop="handleDrop"
    >
      <p>请将图片拖到此处</p>
      <p>支持的文件类型包括：jpg, png, webp</p>
      <p>每个文件最大支持 1MB</p>
    </div>
    <label for="file-input">选择文件</label>
    <label for="folder-input">选择文件夹</label>
    <input type="file" id="file-input" @change="handleFileChange" multiple />
    <input type="file" id="folder-input" webkitdirectory @change="handleFolderChange" />
    <div class="file-list" v-if="fileList.length > 0">
      <table>
        <tr>
          <th>文件名</th>
          <th>文件类型</th>
          <th>文件大小</th>
          <th>上传状态</th>
          <th>操作</th>
        </tr>
        <tr v-for="file in fileList" :key="file.name">
          <td>{{ file.name }}</td>
          <td>{{ file.type }}</td>
          <td>{{ (file.size / 1024).toFixed(2) }} kB</td>
          <td>
            {{ file.status }}
            <input type="progress" :value="file.progress" max="100" min="0">
          </td>

          <td><button @click="uploadFile(file)" :disabled="file.status === '上传中' || file.status === '上传成功'">上传</button></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { upload } from '@/api/user';

const fileList = ref([]);

const addFilesToList = (files) => {
  for (let file of files) {
    const fileItem = {
      name: file.name,
      type: file.type,
      size: file.size / 1024, // 以kB为单位
      status: '等待上传',
      file: file,
    };
    fileList.value.push(fileItem);
  }
};

const handleDrop = (event) => {
  event.preventDefault();
  const files = event.dataTransfer.files;
  addFilesToList(files);
};

const handleFileChange = (event) => {
  const files = Array.from(event.target.files);
  addFilesToList(files);
};

const handleFolderChange = (event) => {
  const files = event.target.files;
  addFilesToList(files);
};

const uploadFile = async (file) => {
  const formData = new FormData();
  console.log(file,"file")
  // 添加文件到FormData对象中，并使用encodeURIComponent对文件名进行编码
  formData.append('file', file.file);
  formData.append('fileName', encodeURIComponent(file.name)); // 将文件名编码为URI组件
  
  file.status = '上传中';

  try {
    const response = await upload(formData);
    file.status = '上传成功';
    console.log('文件上传成功:', response);
  } catch (error) {
    file.status = '上传失败';
    console.error('文件上传出错:', error);
  }
};
</script>

<style lang="scss" scoped>
.document-container {
  padding: 10px;

  .drag-container {
    width: 100%;
    height: 100%;
    border: 2px dashed #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    p {
      margin: 10px 0;
    }
  }
}

label {
  margin-top: 10px;
  cursor: pointer;
  border: 3px solid #181717;
  padding: 5px;
  background-color: #ccc;
  color: #fff;
  border-radius: 5px;

  &:hover {
    background-color: #fff;
    color: #ccc;
  }
}

#file-input,
#folder-input {
  display: none;
}

.file-list {
  margin-top: 10px;
  border: 3px solid #ccc;
  padding: 10px;

  table {
    width: 100%;
    border-collapse: collapse;

    tr {
      border-bottom: 1px solid #211f1f;
      padding: 10px 0;

      th {
        border: 3px solid #211f1f;
        color: #211f1f;
      }

      td {
        padding: 0 10px;
        border: 2px solid #211f1f;
      }
    }
  }
}
</style>
